<template>
  <view>
    <sk-container v-if="GoodsDetail.Article_Name == undefined">
      <view class="guj" style="height: calc(100vh)">
        <sk-waterfall waterfall length:30></sk-waterfall>
      </view>
    </sk-container>
    <view class="content" v-else>
      <swiper circular class="swiper-box" autoplay :interval="3000">
        <swiper-item
          v-for="(item, index) in GoodsDetail.Swiper"
          :key="index"
          class="flex justify-center"
        >
          <image
            v-if="GoodsDetail.Swiper.length != 0"
            :src="Domain_IMG + item.Picture_Url"
            mode=""
            style="width: 96%; border-radius: 25rpx"
            class=""
          >
          </image>
        </swiper-item>
      </swiper>
      <view class="cont">
        <view class="item">
          <view class="name">
            <text>￥</text>
            <text
              >{{
                Specifications[Specification_num].Sales_Unit_Price == ""
                  ? ""
                  : Specifications[Specification_num].Sales_Unit_Price
              }}元</text
            >
          </view>
          <view class="sangname">{{ GoodsDetail.Article_Name }}</view>
          <view class="pl foot sangname">{{ GoodsDetail.Category_Name }}</view>
          <view class="foot" style="padding: 0px 2px">
            <view
              >剩余库存：{{
                Specifications[Specification_num].Stock_Remain
              }}</view
            >
            <view class="guig">已售出{{ GoodsDetail.Stock_Sell }}</view>
          </view>
        </view>
        <!-- <view class="item">
          <view class="way my-2">
            <text class="text-success">装运方式:</text> 整箱 拼箱 散货
          </view>
          <view class="way my-2">
            <text class="text-success">支付方式:</text> 聚合支付 指定账户打款
          </view>
          <view class="way my-2">
            <text class="text-success">交易方式:</text> 担保交易
          </view>
        </view> -->
        <view class="company">
          <view class="header">
            <view class="left">
              <!--    -->
              <image
                v-if="form.Enterprise_Logo != 0"
                class="rounded-circle"
                style="width: 100%; height: 100%"
                :src="
                  Domain_Business +
                  Specifications[Specification_num].Enterprise_Logo
                "
                mode=""
              ></image>
            </view>
            <view class="right">
              <view class="title">{{
                Specifications[Specification_num].Enterprise_Name
              }}</view>
            </view>
          </view>
          <view class="cont">
            <button
              size="mini"
              v-if="
                Specifications[0].Enterprise_Info_SerialNumber !=
                Enterprise_Info_SerialNumber
              "
              @click="
                handleTabs(
                  '/pages/My/Customer_service/Customer_service?Enterprise_Info_SerialNumber=' +
                    Specifications[Specification_num]
                      .Enterprise_Info_SerialNumber +
                    '&name=' +
                    Specifications[Specification_num].Enterprise_Name
                )
              "
            >
              联系对方
            </button>
            <button
              size="mini"
              @click="handleTabs('/pages/index/Traceabilityservices')"
            >
              溯源查看
            </button>
          </view>
        </view>
        <view class="item" v-if="Detail != 0">
          <view class="xiangq">
            <view class="I mr-2"></view>
            商品详情
            <view class="I ml-2"> </view>
          </view>
          <view class="cont">
            <view
              class="flex flex-column mx-10 py-4 w-100"
              style="height: 100%"
            >
              <view
                v-for="item in Detail"
                :key="item.Article_PicNumber"
                style="width: 100%"
              >
                <image
                  style="width: 100%"
                  :src="Domain_IMG + item.Picture_URL"
                  mode="widthFix"
                >
                </image>
              </view>
            </view>
          </view>
        </view>
        <view class="item footer">
          <view class="xiangq">
            <view class="I mr-2"></view>
            交易说明
            <view class="I ml-2"> </view>
          </view>
          <view class="item">
            <TransactionDescription></TransactionDescription>
          </view>
        </view>
        <view
          class="button"
          v-if="Specifications[0].Enterprise_Info_SerialNumber!= Enterprise_Info_SerialNumber"
        >
          <view v-if="Number(Specifications[Specification_num].Stock_Remain!=0)" style="display: flex; justify-content: space-evenly; align-items: center;">
              <view class="mr-2">
                <uni-number-box
                  v-model="Quantity"
                  :min="min"
                  :max="Number(Specifications[Specification_num].Stock_Remain)"
                />
              </view>
              <button @click="goOrder">立即购买</button>
          </view>
          <view v-else>已售空</view>
        </view>
        <view v-else class="button">
          <button>本企发布</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import { getGroupGoodsDetail, GroupServesHistory } from "@/api/group.js";
import TransactionDescription from "@/components/TransactionDescription.vue";
export default {
  name: "goodsdetail",
  data() {
    return {
      Browsing: 0,
      scrollTop: 0,
      is_open_socket: false, // 确保websocket是打开状态
      hearBeatInterval: null, //心跳
      msgList: [],
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
      Domain_IMG: app.globalData.Domain_IMG,
      Domain_Business: app.globalData.Domain_Business,
      Specification_num: 0,
      Enterprise_Info_SerialNumber: "",
      current: "1/5",
      tabNum: 0,
      Quantity: 0,
      isServer: false,
      chatMsg: "",
      total: 0,
      tabs: [
        {
          value: "商品详情",
          isClick: true,
        },
        {
          value: "在线成交",
          isClick: false,
        },
        {
          value: "交易说明",
          isClick: false,
        },
      ],
      form: {
        Type: "1",
        page: 1,
        limit: 5,
        Enterprise_Info_SerialNumber: "",
        Group_Purchasing_SerialNumber: "",
      },
      limit: 0,
      Show: true,
      Data: {},
      Detail: [],
      Swiper: [],
      Payment: [],
      Shipment: [],
      picNum: 0,
      Store_SerialNumber: "",
      Article_SerialNumber: "",
      Sales_Unit_Price_SerialNumber: "",
      GoodsDetail: {},
      Specifications: [
        {
          Sales_Unit_Price: "",
        },
      ],
      min: 0,
      max: 0,
    };
  },
  components: {
    // Tradingchat,
    TransactionDescription,
  },
  onLoad() {
    this.Enterprise_Info_SerialNumber = uni.getStorageSync("enterprise");
    this.Sales_Unit_Price_SerialNumber = uni.getStorageSync(
      "Sales_Unit_Price_SerialNumber"
    );
    this.Store_SerialNumber = uni.getStorageSync("Store_SerialNumber");
    this.Article_SerialNumber = uni.getStorageSync("Article_SerialNumber");
    this.getshowList(
      this.Article_SerialNumber,
      this.Sales_Unit_Price_SerialNumber
    );
  },
  methods: {
    goOrder() {
      if (this.Quantity == 0) {
        uni.showToast({
          title: "请输入购买数量",
          icon: "none",
        });
        return;
      }
      uni.setStorageSync("GoodsDetail", this.GoodsDetail);
      uni.setStorageSync("Quantity", this.Quantity);
      uni.setStorageSync(
        "Goodsprice",
        this.Specifications[this.Specification_num].Sales_Unit_Price
      );
      uni.navigateTo({
        url:
          "/pages/Trade/Submitapplication?Store_SerialNumber=" +
          this.Store_SerialNumber +
          "&Article_SerialNumber=" +
          this.Article_SerialNumber +
          "&Article_Specifications_SerialNumber=" +
          this.Specifications[this.Specification_num]
            .Article_Specifications_SerialNumber +
          "&Sales_Unit_Price_Stock_SerialNumber=" +
          this.Specifications[this.Specification_num]
            .Sales_Unit_Price_Stock_SerialNumber,
      });
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    async getshowList(Article_SerialNumber, Sales_Unit_Price_SerialNumber) {
      const res = await getGroupGoodsDetail({
        data: {
          Article_SerialNumber,
          Sales_Unit_Price_SerialNumber,
        },
      });
      console.log(res);
      if (res.redirect == "REDIRECT") {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      } else if (res.Status == "success") {
        console.log(res);
        this.Browsing = res.Browsing;
        this.GoodsDetail = res.Data;
        this.Swiper = res.Data.Swiper;
        this.Specifications = res.Data.specifications;
        this.max = res.Data.specifications[0].Stock_Remain;
      }
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 1px;

  .swiper-box {
    height: 243px;
  }

  image {
    width: 100%;
  }

  .cont {
    // box-sizing: border-box;
  }

  .item {
    background: #fff;
    margin: 20rpx 20rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;

    .name {
      color: #ff442f;

      text:first-child {
        font-size: 26rpx;
        letter-spacing: 0;
        font-weight: 500;
        padding-bottom: 8rpx;
      }

      text:last-child {
        font-size: 54rpx;
        letter-spacing: 0;
        line-height: 74rpx;
        font-weight: 500;
      }
    }

    .sangname {
      font-size: 16px;
      color: #111;
      letter-spacing: 0;
      line-height: 26px;
      font-weight: 600;
      margin: 0 0 15rpx 0;
    }

    .pl {
      font-size: 24rpx;
    }

    .foot {
      display: flex;
      font-size: 24rpx;
      justify-content: space-between;
      align-items: center;
    }

    .guig {
      width: 24%;
      padding: 20rpx;
      box-sizing: border-box;
      height: 36rpx;
      background: #fff0ef;
      border-radius: 18rpx;
      font-size: 24rpx;
      line-height: 24rpx;
      display: flex;
      align-items: center;
      color: #ff442f;
      border-top: 1px solid #f5f5f5;
    }

    .way {
      font-size: 28rpx;

      text {
        font-weight: bold;
        display: inline-block;
        margin: 0 10rpx 0 0;
      }
    }

    .specifications {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .xiangq {
      display: flex;
      align-items: center;
      justify-content: center;

      .I {
        width: 50px;
        height: 0.5px;
        background: #ddd;
      }
    }
  }

  .company {
    margin: 20rpx 20rpx 0;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;
    padding: 12px 10px;
    background-image: linear-gradient(
      90deg,
      rgba(187, 215, 255, 0.4),
      rgba(89, 130, 255, 0.3)
    );
    border-radius: 20rpx;

    .header {
      display: flex;
      align-items: center;
      margin: 0 0 20rpx 0;
    }

    .cont {
      display: flex;
    }

    .left {
      width: 108rpx;
      height: 108rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .right {
      .title {
        font-size: 30rpx;
        color: #111;
        text-align: left;
        line-height: 40rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 30rpx;
      }
    }
  }

  .button {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    box-sizing: border-box;

    button {
      font-size: 32rpx;
      text-align: center;
      line-height: 32rpx;
      display: block;
      padding: 24rpx 0;
      background: #28a745;
      border-radius: 80rpx;
      color: #fff;
      width: 320rpx;
      margin: 0;
    }

    .cal {
      background-color: #f39147;
    }
  }

  .footer {
    // margin: 0 0 100rpx 0;
    margin-bottom: 150rpx;
  }
}
</style>